<template>
  <div id="managerInfo">
    <div class="addContainer">
      <el-tabs v-model="activeName" class="tabPlane">
        <el-tab-pane label="个人信息" name='1'>
          <div class="contentClass onlyShowContent">
            <div class="clearFix p10">
              <img :src="userHeader" style="width:130px;">
              <el-button type="primary" size="small" class="fr" @click="routerToUpdate">修改</el-button>
            </div>
            <div>
              <h4>基本信息</h4>
              <el-row :gutter="100" class="mt10">
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>工号</p>
                    <el-input v-model="managerInfo.sn" placeholder="" size="small" :disabled="true"></el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>姓名</p>
                    <el-input v-model="managerInfo.name" placeholder="" size="small" :disabled="true"></el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>性别</p>
                    <div class="sameInput">{{managerInfo.gender | genderFilter}}</div>
                    <!-- <el-input v-model="managerInfo.gender" placeholder="" size="small" :disabled="true"></el-input> -->
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>民族</p>
                    <el-input v-model="managerInfo.nation" placeholder="" size="small" :disabled="true"></el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>政治面貌</p>
                    <el-input v-model="managerInfo.politicalStatusName" placeholder="" size="small" :disabled="true"></el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>籍贯</p>
                    <el-input v-model="managerInfo.originCodeName" placeholder="" size="small" :disabled="true"></el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>身份证号</p>
                    <el-input v-model="managerInfo.idNumber" placeholder="" size="small" :disabled="true"></el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>校区</p>
                    <el-input v-model="managerInfo.campus" placeholder="" size="small" :disabled="true"></el-input>
                  </div>
                </el-col>
              </el-row>
              <h4>本人联系信息</h4>
              <el-row :gutter="100" class="mt10">
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>本人电话</p>
                    <el-input v-model="managerInfo.phone" placeholder="" size="small" :disabled="true"></el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>邮箱</p>
                    <el-input v-model="managerInfo.email" placeholder="" size="small" :disabled="true"></el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>微信号</p>
                    <el-input v-model="managerInfo.wechat" placeholder="" size="small" :disabled="true"></el-input>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <p>QQ</p>
                    <el-input v-model="managerInfo.qq" placeholder="" size="small" :disabled="true"></el-input>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {routerPrevName} from '@/tools/utils'
import {common} from '@api/index'
import defaultPic from '@/assets/images/defaultPic.png'
export default {
  name: 'managerInfo',
  data () {
    return {
      userType: parseInt(this.$store.state.user.type),
      activeName: '1',
      managerInfo: {
        email: null,
        gender: null,
        idNumber: null, // 身份证号码
        name: null,
        nation: null, // 民族
        nationId: null,
        originCode: null, // 籍贯code
        originCodeName: null,
        phone: null, // 联系方式
        picUrl: null, // 头像
        politicalStatus: null, // 政治面貌
        politicalStatusName: null,
        qq: null,
        sn: null, // 工号
        wechat: null,
        campus: null // 校区
      }
    }
  },
  created () {
    this.initPage()
  },
  computed: {
    userHeader () {
      return this.managerInfo.picUrl ? `/fastdfs-util/api/fastdfs/download/image?filePath=${this.managerInfo.picUrl}` : defaultPic
    }
  },
  mounted () {

  },
  methods: {
    initPage () {
      this.getManagerInfo()
    },
    // 获取管理者信息
    getManagerInfo () {
      common()._findPersonalInfoBySn().then(res => {
        if (res.status) {
          Object.assign(this.managerInfo, res.data)
        }
      })
    },
    // 跳转修改
    routerToUpdate () {
      // alert(`${routerPrevName(this.userType)}_updateManagerInfo`)
      const routerName = this.userType === 10 ? 2 : this.userType
      this.$router.push({
        name: `${routerPrevName(routerName)}_updateManagerInfo`
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
